SI539  in  Transition 

SI539  - Charles  Severance 


It  is  OK  and  expected  to  feel  a little  lost  for  a 
short  while. 


Schedule  Update 

February  6:  Lenz  I + 2 

February  1 3:  Lenz  4 + 3 

February  20:  Lenz  3 + 4 + Exam  Review 

February  27:  Spring  Break 

March  3:Written  Midterm 


March  12:  Practical  Midterm  - Lenz  5 
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http://en.wikipedia.org/wiki/The_Times_They_Are_a-Changin' 

http://www.youtube.com/watch?v=IZ_Xwl_SN45l 


So  Fa 

• We  have  studied  how  the  Web  Browser  works 

• How  to  make  web  pages  look  nice 

• How  to  make  web  pages  comply  with  W3C  standards 

• How  to  make  web  pages  accessible 

• The  syntax  of  HTML  and  CSS 


• We  are  going  to  learn  how  a Web  Server  works 

• We  are  going  to  learn  how  to  make  web  pages  using  programming 

• We  are  going  to  learn  how  to  store  and  retrieve  data  in  web  pages  in 
a server. 

• We  are  going  to  learn  to  program  - to  write  code 

• We  are  going  to  learn  to  model  data  and  build  databases 


Part  I 


Part  II 


The  big  picture... 


<!DOCTYPE  html  PUBLIC  "-//W3C//DTD  XHTML  1.0  Strict//EN 
"http://www.w3.org/TR/xhtml  I /DTD/xhtml  I -strict.dtd" > 

<html  xmlns="http://www.w3.org/ 1 999/xhtml"  xml:lang="en"> 
<head> 

<title>University  of  Michigan</title> 


A web  server  produces  HTML 
which  is  handed  to  a browser  which 
needs  to  lay  it  out  in  a blink  of  an 
eye  and  have  it  pixel  perfect  as  god 
as  a print  brochure. 


c-2 


Forms  - Input  on  the  Web 


The  whole  form — 


Your  first  name: 


Your  surname: 


Your  email  address: 


Please  tell  us  about  your  hobbies: 


Text  inputs 


Text  area 


Submit  * Submit  button 


• Forms  effect 
page  on  a sei 


http:/, 


Using  Forms  Without  Servers 


• Submitting  form  data  works  without  a server  - the  browser  moves 
from  static  page  to  static  page 

• But  the  data  from  the  forms  is  neither  saved  nor  is  it  usable 


Getting  Data  From  The  Server 


• Each  the  user  clicks  on  an  anchor  tag  with  an  href=  value  to  switch  to 
a new  page,  the  browser  makes  a connection  to  the  web  server  and 
issues  a “GET”  request  - to  GET  the  content  of  the  page  at  the 
specified  URL 

• The  server  returns  the  HTML  document  to  the  Browser  which 
formats  and  displays  the  document  to  the  user. 


HTTP  Request  / Response  Cycle 


Web  Server 


HTTP 

Request 


HTTP 

Response 


Browser 


http://www.oreilly.com/openbook/cgi/ch04_02.html 


HTTP  Request  / Response  Cycle 


Web  Server 


HTTP 


HTTP 


Request 


Response 


GET  /index.html  BrOWS6T 

Accept:  www/source 

Accept:  text/html 

User-Agent:  Lynx/2.4  libwww/2. 14 


<head>  ..  </head> 
<body> 

<h  I >Welcome  to  my 
application</h  I > 

• • • • 

</body> 


http://www.oreilly.com/openbool</cgi/ch04_02.html 


Web  Server 


“Hacking”  HTTP 


Last  login:  Wed  Oct  1 0 04:20: 1 9 on  ttyp2  B TOWS  ST 

si-csev-mbp:~  csev$  telnet  www.umich.edu  80 
Trying  141.21  1.144. 1 88... 

Connected  to  www.umich.edu. 

Escape  character  is  'A]\ 

GET/ 

<html  xmlns="http://www.w3.org/l999/xhtml"  xml:lang="en"> 

<head> 


Forms  Get  .vs.  Post 


• Two  ways  the  browser  can  send  parameters  to  the  web  server 

• GET  - Parameters  are  placed  on  the  URL  which  is  retrieved 

• POST  - The  URL  is  retrieved  and  parameters  are  appended  to  the 
request  in  the  the  HTTP  connection 


Passing  Parameters  to  The  Server 


Web  Server 

HTTP 
Request 

Browser 


GET  /simpleform.html?yourname=fred 
Accept:  www/source 
Accept:  text/htm  I 
User-Agent:  Lynx/2.4  libwww/2. 14 


POST  /cgi-bin/program.pl  HTTP/ 1.0 

Accept:  www/source 

Accept:  text/html 

User-Agent:  Lynx/2.4  libwww/2. 14 

Content-type:  application/x-www-form-urlencoded 

Content-length:  1 3 

yourname=fred 


<input  type="text"  name="yourname"  id="yourid"  /> 


Welcome  to  the 
Server 


http://en.wi  ki  pedia.org/wi  ki/We  I com  e_to_th  e_J  u ngl  e 
http://www.yo  utu  be.com/watch  ?v=xtXN_EH  PwSg 


"I  TWiMK  HOW  S“MOULp  fct  MORE 
EXPLICIT  t-VEEE  irt  STEP  TWO. " 


Web  Server 


HTTP 


HTTP 


Request 


Response 


Browser 


Tasks  Inside  the  Server 


• Process  any  form  input  - possibly  storing  it  in  a database  or  making 
some  other  change  to  the  database  such  as  a delete 

• Decide  which  screen  to  send  back  to  the  user 

• Retrieve  any  needed  data 

• Produce  the  HTML  response  and  send  it  back  to  the  browser 


Programming  Style  in  Servers 


• There  is  a wide  range  of  approaches  to  programming  in  servers 

• Write  a bunch  of  little  programs  that  each  do  all  four  tasks  for  one 
of  many  screens  in  the  program 

• Make  some  rules  and  keep  things  very  well  separated 

• Having  these  overriding  rules  (or  patterns)  is  what  we  call 
“Architecture” 


Our  Architecture:  MVC 


• Controller  - Receives  each  request  and  handles  input  and  orchestrates 
the  other  elements 

• Model  - Holds  the  permanent  data  which  stays  long  after  the  user  has 
closed  their  web  browsers 


• View  - Produces  the  HTML  Response 


MVC  - Request  - Response  Cycle 


We  should  probably  call  this  CMCV  but  MVC  sounds  better. 


Summary 


• We  are  moving  from  a focus  on  how  to  interact  with  Web  Browsers 
using  HTML  and  CSS  towards  learning  how  Web  Servers  dynamically 
produce 

• You  will  learn  all  new  syntax  - all  new  tools  - all  new  patterns 

• You  will  learn  to  program  and  data  model 

• Relax  - you  will  master  this  as  well  - please  use  the  podcasts 


